<template>
  <div>
    <div class="t_body_bg" :style="{backgroundImage: 'url('+bgimg+')'}">
      <div style="width: 6.3rem; margin: 0 auto;">

        <div class="t_logo_font flexcc" >
          <span v-if="!logoimg" style="font-size: 0.3rem; font-weight: bold;">logo</span>
          <img :src="logoimg" style="width: 2.5rem;">
        </div>
        <div style="text-align: center; font-size: 0.3rem; font-weight: bold; margin: 0.5rem 0;">{{ comname }}</div>

        <div class="flexcc">
          <div style="margin: 0 0.2rem 0.2rem; font-weight: bold; cursor: pointer; font-size: 0.3rem;" @click="loginm = 1" :style="{color:(loginm == 1?'rgb(0, 79, 253)':'')}">账号密码登录</div>
          <div style="margin: 0 0.2rem 0.2rem; font-weight: bold; cursor: pointer; font-size: 0.3rem;" v-if="sms_open == 1" @click="loginm = 2" :style="{color:(loginm == 2?'rgb(0, 79, 253)':'')}">验证码登录</div>
        </div>

        <div style="margin-top: 1rem;" v-if="loginm == 1">
          <div class="t_input_box">
            <img src="../../../static/mimg/mlogin2.png" style="width: 20px; margin: 0 5px 0 15px;">
          	<el-input class="t_del_com_input" v-model="form.username" placeholder="请输入账号/手机号"></el-input>
          </div>
          <div class="t_input_box" style="position: relative;">
            <img src="../../../static/mimg/mlogin1.png" style="width: 20px; margin: 0 5px 0 15px;">
          	<el-input class="t_del_com_input" v-model="form.password" placeholder="请输入密码" show-password></el-input>
          </div>
          <div @click="denglu3" class="t_login_btn_box">
          	确定
          </div>
        </div>

        <div style="margin-top: 1rem;" v-if="loginm == 2">
          <div class="t_input_box">
            <img src="../../../static/mimg/mlogin2.png" style="width: 20px; margin: 0 5px 0 15px;">
          	<el-input class="t_del_com_input" v-model="form.phonenum" placeholder="请输入手机号"></el-input>
          </div>
          <div class="t_input_box" style="position: relative;">
            <img src="../../../static/mimg/mlogin3.png" style="width: 20px; margin: 0 5px 0 15px;">
          	<el-input class="t_del_com_input" v-model="form.code" maxlength="6"   placeholder="请输入验证码"></el-input>
          	<div @click="getcode" class="t_get_code" style="position: absolute; right: 2px; top: 2px;">{{ codemsg }}</div>
          </div>
          <div @click="denglu3" class="t_login_btn_box">
          	确定
          </div>
        </div>

        <div class="flexbc" style="margin-top: 0.5rem; color: rgb(0, 90, 255); font-size: 0.25rem;" >
          <div @click="gogo()">忘记密码</div>
          <div @click="go('/mlogin/zhuce')" v-if="check_code"><span style="color: rgb(117, 117, 117);" >没有账号？</span>去注册</div>
        </div>

        <div class="flexcc" style="margin-top: 1rem;"  v-if="weixinhuanjing">
          <van-divider dashed>其他登录方式</van-divider>
        </div>
        <div class="flexcc"  v-if="weixinhuanjing" @click="go2"><img src="../../../static/mimg/wx.png" style="width: 0.8rem;"></div>

      </div>
    </div>
  </div>
</template>

<script>

	export default {
		name: 'login',
    components:{

    },
		data() {
			return {
        loginm:1,
				codemsg:'获取验证码',
				form:{
          username:"",
          password:"",
					phonenum:'',//手机号
					code:'',//验证码
				},
				bgimg:require('@/../static/mimg/mbj.jpg'),
				logoimg:'',
				comname:'欢迎使用',

        weixinhuanjing:false,
        appid:"",
        weixinall:"",
        check_code:"",
        id:"",//334
        sms_open:0
			}
		},
		created() {

      if(localStorage.getItem('jizhuyonghuming')){
        this.form.username = localStorage.getItem('jizhuyonghuming')
      }

      if(localStorage.getItem('jizhuyonghuming')){
        this.form.password = localStorage.getItem('jizhumima')
      }

      var dz_url = window.location.href;//获取地址
      var check_code2 = dz_url.split('?')[1];//获取?之后的参数字符串

      if(check_code2){
        var check_code = decodeURIComponent(check_code2.split('&')[0])
        this.check_code = check_code
      }

		  axios.get('/api/logo').then((response)=>{
        if (response.data.msg.code == 0) {
          this.sms_open = response.data.data.sms_open
		  if(response.data.data.h5_login_background&&response.data.data.h5_login_background!==''){
			this.bgimg = response.data.data.h5_login_background
		  }else{
			this.bgimg = require('@/../static/mimg/mbj.jpg')
		  }
          this.comname = response.data.data.shop_name
          this.logoimg = response.data.data.system_logo
          document.title = response.data.data.shop_name

          this.id = response.data.data.id

          axios.get('/api/wechat/get').then((response2)=>{
            	if (response2.data.msg.code == 0) {
                this.appid  =  response2.data.data

                var ua = window.navigator.userAgent.toLowerCase();
                if (ua.match(/micromessenger/i) == 'micromessenger' && this.appid) {
                     this.weixinhuanjing = true
                }

            	}else {
                vant.Toast(response2.data.msg.info);
            	}
            })


        } else {
          this.$message.error(response.data.msg.info);
        }
		  })
		},
		mounted() {
      var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;



		},
		methods: {
      gogo:function(){
        if(this.sms_open == 1){
          this.go('/mlogin/zhaohuimima')
        }else{
          this.$message.error('请联系管理员修改密码');
        }

      },
      go2:function(url){
        //有邀请码挑注册  没有邀请码跳登录
        if(this.check_code){
          localStorage.setItem('check_code',this.check_code)
          this.$router.push('/mlogin/bangdingshoujihao')
        }else{
          this.$router.push('/mlogin/bangdingshoujihaologin')
        }
      },
      go:function(url){
        this.$router.push(url +'?' + encodeURIComponent(this.check_code))
      },
      //获取验证码
      getcode(){

      	if(this.form.phonenum.length!=11){
      		this.$message.error('请输入正确手机号');
      		return
      	}

      	if(this.codemsg=='获取验证码'){
      		this.codemsg = 60
      		var time = setInterval(()=>{
      			if(this.codemsg>0){
      				this.codemsg--
      			}else{
      				this.codemsg = '获取验证码'
      				clearInterval(time)
      			}
      		},1000)

         var obg = {
         	mobile:this.form.phonenum,
         }
         axios.post('/api/user/login/code/send',obg).then((response)=>{
         	if (response.data.msg.code == 0) {
         		this.$message({
         			message: '发送成功',
         			type: 'success'
         		});
         	} else {
         		this.$message.error(response.data.msg.info);
         	}
         })
      	}

      },
      denglu3(){

        // <el-input class="t_del_com_input" v-model="form.username" placeholder="请输入账号/手机号"></el-input>
        // </div>
        // <div class="t_input_box" style="position: relative;">
        //   <img src="../../../static/mimg/mlogin1.png" style="width: 20px; margin: 0 5px 0 15px;">
        // 	<el-input class="t_del_com_input" v-model="form.password" placeholder="请输入密码" show-password></el-input>

      	if(this.loginm == 1){
      	  //账号密码
      	  if(this.form.username==''){
      	  	this.$message.error('请输入手机号');
      	  	return
      	  }
      	  if(this.form.password==''){
      	  	this.$message.error('请输入密码');
      	  	return
      	  }
      	  var obg={
      	  	name:this.form.username,
      	  	password:this.form.password,
      	  }
      	}

      	if(this.loginm == 2){
      	  //手机号验证码
      	  if(this.form.phonenum==''){
      	  	this.$message.error('请输入手机号');
      	  	return
      	  }
      	  if(this.form.code==''){
      	  	this.$message.error('请输入验证码');
      	  	return
      	  }

          var obg={
          	name:this.form.phonenum,
          	sms_code:this.form.code,
          }
      	}


      	axios.post('/api/login',obg).then((response)=>{
      		if (response.data.msg.code == 0) {
      			this.$message({
      				message: '登录成功',
      				type: 'success'
      			});

            localStorage.setItem('jizhuyonghuming',this.form.username)
            localStorage.setItem('jizhumima',this.form.password)

      	      //1 管理员 0 用户
      	      if(response.data.data.is_owner==1){
      	        //临时写在这里
      	        axios.get('/own/auth/user').then((response2)=>{
      	          if (response2.data.msg.code == 0) {
      	            localStorage.setItem('user',JSON.stringify(response2.data.data))
      	            this.$nextTick(()=>{
                      location.href = window.location.origin+'/hou'
      	            })
      	          } else {
      	            this.$message.error(response2.data.msg.info);
      	          }
      	        })
      	      }

      	      if(response.data.data.is_owner==0){
      	        axios.get('/agent/auth/user').then((response2)=>{
      	          if (response2.data.msg.code == 0) {
      	            localStorage.setItem('user',JSON.stringify(response2.data.data))
      	            this.$nextTick(()=>{
					// 最初跳转分销商首页
				    // location.href = window.location.origin+'/web'


					// 带shop_id跳转到分销商h5
      	            // location.href = window.location.origin + "/h5/index?shop_id";

					// 直接跳转分销商h5 12.12
                    location.href = window.location.origin + "/h5/index";
      	            })
      	          } else {
      	            this.$message.error(response2.data.msg.info);
      	          }
      	        })
      	      }

      		} else {
      			this.$message.error(response.data.msg.info);
      		}
      	})
      },
		}
	}
</script>

<style scoped>
	.t_body_bg{
		width:100vw;
		min-height:100vh;
    padding-bottom: 1rem;
		/* background-image: url('/static/img/loginbg.png'); */
		/* background-position: center center; */
    background-size: cover;
    background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: flex-end;

	}
	.t_login_box{
		width: 524px;
		/* height: 776px; */
		padding: 30px;
		border-radius: 45px;
		background-color: #f6f8fb;
		text-align: center;
		margin-right: 200px;
	}
	.t_login_con{
		width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	.t_type_box{
		display: flex;
		justify-content: center;
		margin-bottom: 30px;
	}
	.t_type_btn{
		width: 100px;
		height: 50px;
		background-color: #e3e8f1;
		border-radius: 25px;
		text-align: center;
		line-height:50px ;
		color: #AFB3BC;
		border: 1px solid #E3E8F1;
		cursor: pointer;
	}
	.t_type_btn_lei{
		background-color: #E6EFFF;
		color: #005AFF;
		border: 1px solid #005AFF;
	}
	.t_input_box{
		border: 1px solid #e3e8f1;
		border-radius: 25px;
		display: flex;
		height: 46px;
		align-items: center;
		background-color: white;
		overflow: hidden;
		margin-bottom: 20px;
	}
	.t_input_box img{
		margin-left: 22px;
		margin-right: 0px;
	}
	/deep/.t_input_box .el-input__inner{
		border: none;
	}
	.t_get_code{
		width: 112px;
		height: 40px;
		background: #e6efff;
		border: 1px solid #005aff;
		border-radius: 25px;
		text-align: center;
		line-height: 40px;
		color: #005AFF;
		font-size: 14px;
		cursor: pointer;

	}
	.t_login_btn_box{
		background-color:#005aff;
		color: white;
		text-align: center;
		height: 50px;
		line-height: 50px;
		font-size: 18px;
		border-radius: 25px;
		margin-top: 60px;
		cursor: pointer;
	}
	.t_tips_btn{
		color: #afb3bc;
		font-size: 14px;
		text-align: center;
		margin-top: 23px;
		cursor: pointer;
	}
	.t_logo_font{
		margin-top: 58px;
		color: #005aff;
		font-size: 29px;
	}
	.t_logo_font img{
		width: 100px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.t_welcome_font{
		margin-top: 28px;
		margin-bottom: 28px;
		font-weight: bold;
		font-size: 28px;
	}
	/deep/.t_del_com_input .el-input__inner{
		border: none !important;
		background-color: white !important;
	}
</style>
